.<template>
  <div>
    <div class="home">
      <!-- 顶部 -->
      <div class="home_top">
        <span class="iconfont icon-zhifu"></span>
        <div class="centerTab">
          <em @click="$router.push({path:'/person'})">我的</em>
          <em @click="$router.go(0)">move新闻</em>
          <em>发现</em>
        </div>
        <span class="iconfont icon-fangdajing"></span>
      </div>

      <div class="home_nav" v-if="articleLists">
        <!-- tab栏 -->
        <van-tabs v-model="activeIndex" color="#31c37b">
          <van-tab :title="item.name" v-for="(item,index) of articleLists " :key="index">
            <!-- 列表 -->
            <van-list
              :immediate-check="false"
              v-model="item.loading"
              :finished="item.finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <newBar
                :v-if="Postitem.length >= 1"
                :postList="Postitem"
                v-for="(Postitem,index) of item.content"
                :key="index"
                @go_particulars="go_particulars"
              ></newBar>
            </van-list>
            <!-- 列表 -->
          </van-tab>
        </van-tabs>
        <!-- tab栏 -->
      </div>
    </div>
  </div>
</template>

<script>
import newBar from "../components/newsBar";
export default {
  data() {
    return {
      activeIndex: 1,
      articleLists: []
    };
  },
  watch: {
    activeIndex(index) {
      const item = this.articleLists[index];
      if (item.content.length < 1) {
        this.getPost();
      }
      if (item.content.length < 1) {
        item.loading = true;
        setTimeout(
          function() {
            item.finished = true;
            item.loading = false;
            //  item.finished = true;
          }.bind(this),
          300
        );
      }
    }
  },
  methods: {
    // ? 异步获取post数据
    getCategory() {
      this.$axios({
        url: "/category",
        method: "get"
      }).then(res => {
        const { data } = res.data;
        this.articleLists = this.initCategory(data);
        // 获取文章列表
        this.getPost();
      });
    },
    // 初始化数据
    initCategory(data = []) {
      data.forEach(item => {
        item.content = [];
        item.loading = false; //加载显示
        item.finished = false; //到底显示
        item.pageIndex = 1; //当前tab下的数据的页数 用于后添加数据 每次++
        item.pageSize = 10; //每次加载的数据条 bar
        item.total = 1; // 初始化文章数量 后面获取请求后会重置
      });
      return data;
    },
    //  ? 获取文章列表
    getPost() {
      const item = this.articleLists[this.activeIndex]; // 获取当前tab栏下的item
      this.$axios({
        method: "get",
        url: "post",
        params: {
          category: item.id,
          pageIndex: item.pageIndex,
          pageSize: 10
        }
      }).then(res => {
        const { data, total } = res.data; // 获取数据 和 total
        // tatal 是文章一共有多少篇 修改init时默认值1
        item.total = total;
        // 判断是否有数据
        if (item.content.length < 1) {
          item.content = data;
        } else {
          item.content = [...item.content, ...data];
        }
        item.pageIndex++;
      });
    },
    // 列表加载
    onLoad() {
      const item = this.articleLists[this.activeIndex];
      item.loading = true;
      // 定时器 延迟逼真用户体验
      setTimeout(
        function() {
          // 一共有的文章数量 / 每次刷新的页数(10) 和 当前页 判断
          if (item.total / 10 >= item.pageIndex) {
            this.getPost();
            item.loading = false;
          } else {
            item.finished = true;
          }
        }.bind(this),
        100
      );
    },
    // 详情页跳转
    go_particulars(id) {
      this.$router.push({
        path: "/particulars?id=" + id
      });
    }
  },
  mounted() {
    this.getCategory();
  },
  components: {
    newBar
  }
};
</script>

<style lang="less" scoped>
.home_top {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #31c37b;
  padding: 4.167vw;
  color: #a1e9c0;
  position: fixed;
  top: 0;
  z-index: 10;
  .centerTab {
    color: #e2f2e6;
    font-weight: 600;
    font-size: 20.002px;
    width: 69.444vw;
    display: flex;
    justify-content: space-around;
  }
  .icon-zhifu {
    font-size: 5vw;
  }
  .icon-fangdajing {
    font-size: 5.556vw;
  }
}
.home_nav {
  margin-top: 15.556vw;
}
</style>